<template>
    <div>
        <div style="margin-bottom: 10px;">
            <el-button size="default" type="primary" plain class="ml10" @click="back">
                返回 </el-button>
        </div>
        <div id="player" class="vedio"></div>
    </div>
</template>
<script setup lang='ts'>
import { ref, reactive, onBeforeUnmount, onMounted } from 'vue'
const props = defineProps({
    broadcastId: String
})
const emit = defineEmits(['videoBack'])

onMounted(() => {
    if (props.broadcastId) {
        loadPlayerScript(loadPlayer)
    }
})

let [timer, timer2] = [null, null] // 保存进度循环 过期时间比较循环
const videoFlag = ref<boolean>(false) //当前视频是否正在播放中
//视频播放
const loadPlayerScript = (callback: any) => {
    if (!window['polyvPlayer']) {
        const myScript = document.createElement('script')
        myScript.setAttribute('src', 'https://player.polyv.net/script/player.js')
        myScript.onload = callback
        document.body.appendChild(myScript)
    } else {
        callback()
    }
}

let player = null
const loadPlayer = () => {
    const polyvPlayer = window['polyvPlayer']
    player = polyvPlayer({
        wrap: '#player',
        width: '1300',
        height: '700',
        vid: props.broadcastId, // '88083abbf5bcf1356e05d39666be527a_8' 视频id
        // loading_bg_img: firstImg.value,//封面图
        history_video_duration: 0.5, //默认时长超过5分钟的视频才会开启续播功能，可通过此参数修改，单位：分钟。
        ban_history_time: 'off', //当值为’on‘时会禁用续播功能。
        // 播放器只会在视频播放10秒后至视频结束10秒前的时间段内正常记录续播点。播放不足10秒不续播，播放到了最后10秒但未播完，续播点在结束前10秒，播完后不续播。
        ban_seek: 'off', //是否禁止拖拽进度条{on,off}。进度100%了可以拖动  学习培训可以拖动
        ban_seek_by_limit_time: 'off', //是否禁止拖拽进度至视频未播放到的位置，为on时只可在已播放过的进度范围内拖拽（向前拖拽）
        ban_ad: true, //是否禁止播放广告。
        preview: false, //是否使用预览模式，到达预览时长后会停止播放，预览时长可在管理后台配置。
        watchStartTime: 0, //播放开始时间，表示视频从第几秒开始播放，参数值需小于视频时长。
    })
    player.on('s2j_onVideoPause', (...params: any) => {
        //暂停时 证书培训 且不是结束 获取当前播放时间  保存播放时间
        //暂停视频时  证书培训需要保存视频进度
        //如果要到达的视频下标 和当前正在播放的视频下班不是同一个  则要先保存视频  再切换视频   activeChange.value
        //暂停视频时 证书培训
        videoFlag.value = false
    })
    player.on('s2j_onPlayOver', () => {
        //播放完成之后 自动播放下一个视频

    })
    player.on('s2j_onPlayStart', () => {
        //视频初次播放时触发，参数返回vid。
        videoFlag.value = true
    })
    player.on('s2j_onVideoPlay', () => {
        //视频初次播放或由暂停恢复播放时触发
        videoFlag.value = true
    })
    player.on('s2j_onPlayOver', () => {

    })
}

const back = () => {
    emit('videoBack')
}

onBeforeUnmount(() => {
    if (player) {
        player.destroy()
    }
})
</script>
<style scoped lang='scss'>
.vedio {
    width: 100%;
}
</style>